Ejemplo Práctico: Filtros CSS en Imágenes

Esta práctica muestra cómo usar diferentes filtros CSS para aplicar efectos visuales a imágenes.

1. Filtro: Blur (Desenfoque)

Blur 2px

Blur 6px

2. Filtro: Brightness (Brillo)

150% brillo

50% brillo

3. Filtro: Contrast (Contraste)

150% contraste

50% contraste

4. Filtro: Drop Shadow (Sombra)

Sombra gris

Sombra azul clara

5. Filtro: Grayscale (Escala de grises)

100% grises

60% grises

40% grises

6. Filtro: Hue-Rotate (Rotación de tono)

200 grados

90 grados

-90 grados

7. Filtro: Invert (Invertir colores)

30% invertido

70% invertido

100% invertido

8. Filtro: Opacity (Opacidad)

80% opacidad

50% opacidad

20% opacidad

9. Filtro: Saturate (Saturación de color)

Sin color

Saturación 100%

Saturación 200%

Sepia (sepia)

Sepia 100%

Sepia 60%

Sepia 40%